<template>
    <div class="moreCom">
        <div class="boxShadow flex moreBtn" v-show="this.$store.state.showMoreBtns">
            <el-tooltip class="item" effect="dark" :content="$t('buttons.waypoint')" placement="left">
                <el-button icon="el-icon-map-location" class="btn" @click="clickIcon('waypoints')"></el-button>
            </el-tooltip>
            
            <el-tooltip class="item" effect="dark" :content="$t('buttons.trajectory')" placement="left">
                <el-button class="btn trajectoryIcon"  @click="clickIcon('trajectory')"></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" :content="$t('buttons.wifi')" placement="left">
                <el-button class="btn wifiIcon" @click="clickIcon('wifi')"></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" :content="$t('buttons.joystick')" placement="left">
                <el-button icon="el-icon-place" class="btn" @click="clickIcon('joystick')"></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" :content="$t('titles.more')" placement="left">
                <el-button icon="el-icon-more" class="btn" @click="displayMore"></el-button>
            </el-tooltip>
        </div>
       
        <el-drawer
        :visible.sync="drawer"
        :close-on-press-escape="false"
        custom-class="moreBox"
        :size="dialogWidth"
        :modal="modal"
        :wrapperClosable="closable"
        :show-close="showClose"
        :direction="direction">
            <div class="branchNameBox flex">
                <div class="branchName">分支:</div>
                <el-select v-model="$store.state.nowMapName" size="mini" placeholder="请选择" popper-class="branchSelect">
                    <el-option
                    v-for="(item, index) in $store.state.mapList"
                    :key="index"
                    :label="item"
                    :value="item"
                    :disabled="item === $store.state.nowMapName">
                    <span class="leftName" style="float: left" @click="chooseBranch(item)">{{ item }}</span>
                    <span class="rightDel" style="float: right; color: #8492a6; font-size: 13px" @click="delBranch(item)" v-if="item !== 'master'"><i class="el-icon-delete"></i></span>
                    <span class="rightDel" style="float: right; color: #8492a6; font-size: 13px" v-else></span>
                    </el-option>
                </el-select>
                <div class="addBranch">
                    <el-tooltip class="item" effect="dark" :content="$t('buttons.newBranch')" placement="bottom">
                        <el-button icon="el-icon-plus" size="small" @click="clickIcon('newBranch')"></el-button>
                    </el-tooltip>
                </div>
            </div>

            <div class="btnBox">
                <!-- 右侧更多功能 -->
                <div class="flex moreBox" id="moreBox">
                    <div class="moreItem flex" @click="clickIcon('mapping')">
                        <div class="icon boxShadow mapNor"></div>
                        <p class="itemTitle">{{ $t("buttons.newMapping")}}</p>
                    </div>
                    <div class="moreItem flex" @click="clickIcon('downloadMap')">
                        <div class="icon flex boxShadow">
                            <i class="el-icon-download"></i>
                        </div>
                        <p class="itemTitle">{{ $t("buttons.downloadMap")}}</p>
                    </div>
                    <div class="moreItem flex" @click="clickIcon('uploadMap')">
                        <div class="icon flex boxShadow">
                            <i class="el-icon-upload2"></i>
                        </div>
                        <p class="itemTitle">{{ $t("buttons.uploadMap")}}</p>
                    </div>
                    <div class="moreItem flex" @click="clickIcon('authorization')">
                        <div class="icon flex boxShadow">
                            <i class="el-icon-user"></i>
                        </div>
                        <p class="itemTitle">{{ $t("buttons.permissions")}}</p>
                    </div>
                   
                    <div class="moreItem flex" @click="clickIcon('initialPose')">
                        <div class="icon flex boxShadow">
                            <i class="el-icon-thumb"></i>
                        </div>
                        <p class="itemTitle">{{ $t("buttons.initialPose")}}</p>
                    </div>
                    <div class="moreItem flex" @click="clickIcon('volume')">
                        <div class="icon boxShadow voiceNor"></div>
                        <p class="itemTitle">{{ $t("buttons.volume")}}</p>
                    </div>
                   
                    <!-- <div class="moreItem flex" @click="clickIcon('footprint')">
                        <div class="icon boxShadow" :class="outline?'outlineSel' : 'outlineNor'"></div>
                        <p class="itemTitle">{{ $t("buttons.footprint")}}</p>
                    </div> -->
                    
                    <!-- <div class="moreItem flex" @click="clickIcon('globalPlan')">
                        <div class="icon boxShadow" :class="global?'globalSel' : 'globalNor'"></div>
                        <p class="itemTitle">{{ $t("buttons.pathGlobal")}}</P>
                    </div> -->
                    <!-- <div class="moreItem flex" @click="clickIcon('localPlan')">
                        <div class="icon boxShadow" :class="part?'partSel' : 'partNor'"></div>
                        <p class="itemTitle">{{ $t("buttons.pathLocal")}}</p>
                    </div> -->
                    
                    <div class="moreItem flex" @click="clickIcon('update')">
                        <div class="icon flex boxShadow">
                            <i class="el-icon-refresh"></i>
                        </div>
                        <p class="itemTitle">{{ $t("buttons.update")}}</p>
                    </div>
                    <div class="moreItem flex"  @click="clickIcon('laserScan')">
                        <div class="icon boxShadow" :class="laser?'laserSel' : 'laserNor'"></div>
                        <p class="itemTitle">{{ $t("buttons.laserScan")}}</p>
                    </div>
                    
                    
                    <div class="moreItem flex" @click="clickIcon('language')">
                        <div class="icon boxShadow" :class="language? 'languageSel' : 'languageNor'"></div>
                        <p class="itemTitle">中/EN</p>
                    </div>
                    <div class="moreItem flex" @click="clickIcon('guide')">
                        <div class="icon flex boxShadow">
                            <i class="el-icon-wind-power"></i>
                        </div>
                        <p class="itemTitle">{{ $t("buttons.guide")}}</p>
                    </div>
                    <!-- <div class="moreItem flex" @click="clickIcon('swj')">
                        <div class="icon flex boxShadow">
                            <i class="el-icon-truck"></i>
                        </div>
                        <p class="itemTitle">简易版上位机</p>
                    </div> -->
                    <div class="moreItem flex" @click="clickIcon('help')">
                        <div class="icon boxShadow helpNor"></div>
                        <p class="itemTitle">{{ $t("buttons.help")}}</p>
                    </div>
                </div>
            </div>
            <i class="el-icon-s-tools settingBtn" @click="showSetting"></i>
            <el-drawer
            :size="innerWidth"
            custom-class="innerBox"
            :append-to-body="true"
            :show-close="showClose"
            :visible.sync="innerDrawer">
                <div class="innerSetBox">
                    <div class="setItem flex" @click="rmLocalstorage"><div>清除缓存</div><i class="el-icon-arrow-right"></i></div>
                </div>
            </el-drawer>
        </el-drawer>
    </div>
</template>

<script>
import { showAuthor, displayFootprint, displayLaserScan, globalPlan, tabLocalPlan, guideStore} from '../js/methods'
import { showNewMap, showUploadMap, showDownloadMap } from '../js/map'
import { showWifi } from '../js/wifi'
import { showWaypointList } from '../js/waypoint'
import { showTrajectoryList } from '../js/trajectory'
import { displayJoystick } from '../js/joystick'
import { showVolume } from '../js/volume';
import { showUpdate } from '../js/update';
import { showBranch, switchBranch, deleteBranch } from '../js/branch';
import { poseEstimate } from '../js/robot'

export default {
    name: 'more',
    components:{

    },
    data(){
        return{
            drawer: false,
            direction: 'rtl',
            closable: true,
            showClose: false,
            modal: false,
            showMore: false,

            outline: false,
            laser: false,
            global: false,
            part: false,
            update: false,
            language: false,
            locale: 'cn',
            lang: 'ENG',
            dialogWidth: '60%',
            dialogVisible: false,
            downLoadDialogVisible: false,
            limit: 1,//上传最大张数
            base64Data:"",
            downloadRadio: "",
            radio: '',
            mapWidth: '',
            mapHeight:'',
            branchName: "",
            innerDrawer: false,
            innerWidth: '40%',

            cities: [{
            value: 'Beijing',
            label: '北京'
            }, {
            value: 'Shanghai',
            label: '上海'
            }, {
            value: 'Nanjing',
            label: '南京'
            }, {
            value: 'Chengdu',
            label: '成都'
            }, {
            value: 'Shenzhen',
            label: '深圳'
            }, {
            value: 'Guangzhou',
            label: '广州'
            }],
            value: ''
        }
    },
    methods:{
        displayMore: function(){
            this.drawer = !this.drawer
        },

        //选择分支
        chooseBranch: function(name){
            switchBranch(name);
            this.drawer = false
        },

        //删除分支
        delBranch: function(name){
            const that = this;
            that.drawer = false;
            that.$confirm('是否永久删除该分支?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                customClass: "delBranchCustom"
            }).then(() => {
                deleteBranch(name);
            }).catch(() => {
                          
            });
        },

        // 选择更多弹框中的按钮
        clickIcon:function(type){
            const that = this;
            that.drawer = false;
            switch (type){
                case "mapping":
                    showNewMap(true);
                    break;
                case "wifi":
                    showWifi(true);
                    break;
                case "authorization":
                    showAuthor(true);
                    break;
                case "waypoints":
                    showWaypointList(true);
                break;
                case "trajectory":
                    showTrajectoryList(true);
                break;
                case "initialPose":
                    poseEstimate();
                break;
                case "joystick":
                    displayJoystick(true);
                    break;
                case "newBranch":
                    showBranch(true);
                    break;
                case 'laserScan':
                    that.laser = !that.laser;
                    displayLaserScan(that.laser);
                break;

                case 'footprint':
                    that.outline = !that.outline;
                    displayFootprint(that.outline);
                break;

                case 'globalPlan':
                    that.global = !that.global;
                    globalPlan(that.global);
                break;

                case 'localPlan':
                    that.part = !that.part;
                    tabLocalPlan(that.part);
                break;

                case 'volume':
                    showVolume(true);
                break;

                case 'update':
                    showUpdate(true);
                break;

                case 'language':
                    // 增加传入语言
                    if(that.locale=='cn'){
                        that.lang='EN';
                        that.locale='en';
                    }else{
                        that.lang='中文';
                        that.locale='cn';
                    }
                    that.language = !that.language;
                    window.localStorage.setItem('lng', this.locale=='cn'?'0':'1');
                break;

                case 'uploadMap':
                    showUploadMap(true);
                    // that.dialogVisible = true;
                    break;

                case 'downloadMap':
                    showDownloadMap(true);
                    break;

                case 'help':
                    window.location.href = 'http://hitrobotgroup.github.io/'
                break;

                case "guide":
                    window.localStorage.removeItem("guide");
                    window.localStorage.removeItem("guideName");
                    guideStore();
                    break;
              
                default:
                break;
            }
        },

        //显示设置模态框
        showSetting: function(){
            this.innerDrawer = true;
        },

        //清除缓存
        rmLocalstorage: function(){
            const that = this;
            const loading = that.$loading({
                lock: true,
                text: '清除中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            window.localStorage.clear();
            setTimeout(() => {
                that.$notify({
                    message: '清除成功',
                    position: 'top-left',
                    type: "success",
                    offset: 100,
                });
                loading.close();
            }, 1000);
        }
    },

    beforeMount(){
        let winWidth = document.body.clientWidth;
        if(winWidth > 768){
            this.dialogWidth = '30%';
            this.innerWidth = '20%';
        }else{
            this.dialogWidth = '60%';
            this.innerWidth = '40%';
        }
    },

    mounted(){
        //判断引导是否已完成
        let guide = window.localStorage.getItem("guide");
        if(guide){
            this.$store.commit('switchMoreBtns', true);
        }

        //中英文切换
        if(window.localStorage.getItem('lng') == '0'){
            this.locale='cn';
            this.lang='ENG';
        }else{
            this.locale='en';
            this.lang='中文';
        }
        window.localStorage.setItem('lng', this.locale=='cn'?'0':'1');
    }, 

    //属性监听
    watch:{
       locale (val) {
          this.$i18n.locale = val;
        },

        // "$store.state.showMoreBtns": function(val){
        //     this.showMore = val;
        //     console.log(val)
        // }
    }

}
</script>

<style scoped lang="less">
.moreCom{
    position: relative;
    overflow: hidden;
    .moreBtn{
        position: fixed;
        background: #ffffff;
        top: 140px;
        right: 15px;
        border-radius: 4px;
        flex-direction: column;
        z-index: 1999;
        width: 40px;
        .btn{
            width: 100%;
            height: 40px;
            padding: 0;
            margin-left: 0;
            border-bottom: 1px solid rgba(0,0,0,0.04);
            border-top: none;
            border-left: none;
            border-right: none;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 40%;
            font-size: 18px;
        }
        .trajectoryIcon{
            background-image: url("../../src/assets/icon-track-nor.png");
        }
        .wifiIcon{
            background-image: url("../../src/assets/icon-wifi-nor.png");
        }
    }
}
.branchNameBox{
    margin: 0 12px 20px 12px;
    .branchName{
        font-size: 14px;
        width: 60px;
        text-align: center;
    }
    .leftName{
        float: left;
    }
    .rightDel{
        float: right;
        color: #8492a6;
        font-size: 13px
    }
    .addBranch{
        button{
            border: none;
            font-size: 16px;
        }
    }
}
.btnBox{
    .moreBox{
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        .moreItem{
            font-size: 12px;
            margin: 5px 0px;
            width: 33.333%;
            text-align: center;
            flex-direction: column;
            .icon{
                width: 50px;
                height: 50px;
                border-radius: 4px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 40%;
                margin-bottom: 5px;
            }
            .mapNor{
                background-image: url("../../src/assets/icon-map-nor.png");
            }
            
            .outlineSel{
                background-image: url("../../src/assets/icon-outline-sel.png");
            }
            .outlineNor{
                background-image: url("../../src/assets/icon-outline-nor.png");
            }
            .laserSel{
                background-image: url("../../src/assets/icon-laser-sel.png");
            }
            .laserNor{
                background-image: url("../../src/assets/icon-laser-nor.png");
            }
            .globalSel{
                background-image: url("../../src/assets/icon-global-sel.png");
            }
            .globalNor{
                background-image: url("../../src/assets/icon-global-nor.png");
            }
            .partSel{
                background-image: url("../../src/assets/icon-part-sel.png");
            }
            .partNor{
                background-image: url("../../src/assets/icon-part-nor.png");
            }
            .voiceNor{
                background-image: url("../../src/assets/icon-voice-nor.png");
            }
            .languageSel{
                background-image: url("../../src/assets/icon-lang-zh.png");
            }
            .languageNor{
                background-image: url("../../src/assets/icon-lang-en.png");
            }
            .helpNor{
                background-image: url("../../src/assets/icon-help-nor.png");
            }
        }
        .itemTitle{
            width: 61px;
            overflow: hidden;
            white-space: nowrap;
        }
        .boxShadow{
            font-size: 24px;
            color: #616161;
        }
        
    }
    .uploadBox{
        margin-top: 15px;
    }
}
.settingBtn{
    position: absolute;
    bottom: 30px;
    right: 10px;
    font-size: 20px;
}
.innerSetBox{
    width: 100%;
    height: 100%;
    font-size: 14px;
    background-color: #eeeeee;
    padding: 15px 0;
    .setItem{
        width: 100%;
        height: 45px;
        line-height: 45px;
        background-color: #ffffff;
        justify-content: space-between;
        padding: 0 15px;
        cursor: pointer;
    }
}
</style>